var smallBox = document.querySelectorAll('.small-box');
var keyRestart = document.querySelector('.keyRestart');
var fs = document.querySelector('.fs span')
var zgfs = document.querySelector('.zgfs span')
var jilu = []
var jiluValue = []
var keyBack = document.querySelector('.keyBack');

//生成数字函数
function Num() {
    //用于定位一个随机方格
    var random = Math.floor(Math.random() * (smallBox.length));
    //用于计算概率
    var probability = Math.floor(Math.random() * 100)
    if (smallBox[random].getAttribute('value') == 0) {
        if (probability >= 0 && probability <= 9) { //0.1的概率生成4
            smallBox[random].setAttribute('value', 4)
            smallBox[random].innerHTML = '4'
        } else { //剩下0.9的概率生成2
            smallBox[random].setAttribute('value', 2)
            smallBox[random].innerHTML = '2'
        }
    } else {
        Num()
    }

}

Num()
Num()

// var arr = [2, 2, 2, 2]  ==>  [4 ,4 , 0 , 0]
function count(arr) {
    // console.log(arr);
    var newArr = []
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] != 0) {
            for (j = i + 1; j < arr.length; j++) {
                if (arr[j] != 0) {
                    break
                }
            }
            if (arr[i] != arr[j]) {
                newArr.push(arr[i])
            } else {
                newArr.push(arr[i] + arr[j])
                fs.innerHTML = Number(fs.innerHTML) + (arr[i] + arr[j])
                i = j
            }
        }
    }

    if (newArr.length < 4) {
        for (i = 0; i < 4; i++) {
            if (!newArr[i]) {
                newArr[i] = 0
            }
        }

    }

    // console.log(newArr);
    return newArr

}


function move(arr) {
    // console.log(arr);
    // console.log(Number(smallBox[arr[0]].getAttribute('value')));
    var newValue = count([
        Number(smallBox[arr[0]].getAttribute('value')),
        Number(smallBox[arr[1]].getAttribute('value')),
        Number(smallBox[arr[2]].getAttribute('value')),
        Number(smallBox[arr[3]].getAttribute('value'))
    ])
    for (var i = 0; i < arr.length; i++) {
        smallBox[arr[i]].setAttribute('value', newValue[i])
        if (newValue[i] != 0) {
            smallBox[arr[i]].innerHTML = newValue[i]
        } else {
            smallBox[arr[i]].innerHTML = ''
        }

    }

    // console.log(newValue);
}

document.onkeydown = function (e) {
    switch (e.key) {
        case 'ArrowUp':
            back()
            move([0, 4, 8, 12])
            move([1, 5, 9, 13])
            move([2, 6, 10, 14])
            move([3, 7, 11, 15])
            Num()
            break

        case 'ArrowDown':
            back()
            move([12, 8, 4, 0])
            move([13, 9, 5, 1])
            move([14, 10, 6, 2])
            move([15, 11, 7, 3])
            Num()
            break

        case 'ArrowLeft':
            back()
            move([0, 1, 2, 3])
            move([4, 5, 6, 7])
            move([8, 9, 10, 11])
            move([12, 13, 14, 15])
            Num()
            break

        case 'ArrowRight':
            back()
            move([3, 2, 1, 0]),
            move([7, 6, 5, 4]),
            move([11, 10, 9, 8]),
            move([15, 14, 13, 12])
            Num()
            break
        case 'Backspace':
            if(jilu.length != 0){
                for (var i = 0; i < smallBox.length; i++){
                    smallBox[i].innerHTML = jilu[i]
                    smallBox[i].setAttribute('value', jilu[i])
                    fs.innerHTML = fsnum
                }
            }
            break
        case 'Enter':
            Restart()
            break

    }
}

function Restart(){
    for (var i = 0; i < smallBox.length; i++) {
        smallBox[i].setAttribute('value', 0)
        smallBox[i].innerHTML = ''
    }

    Num()
    Num()

    if(Number(zgfs.innerHTML) < Number(fs.innerHTML)) {
        zgfs.innerHTML = fs.innerHTML
    }
    fs.innerHTML = '0'
    jilu = []

}


keyRestart.addEventListener('click', Restart)

var fsnum = 0

function back(){
    for (var i = 0; i < smallBox.length; i++){
        jilu[i] = smallBox[i].innerHTML
        fsnum = fs.innerHTML
    }

}

keyBack.addEventListener('click', function () {
    if(jilu.length != 0){
        for (var i = 0; i < smallBox.length; i++){
            smallBox[i].innerHTML = jilu[i]
            smallBox[i].setAttribute('value', jilu[i])
            fs.innerHTML = fsnum
        }
    }
    
})
